import { Button, Form, Input, Select } from "antd";
import React from "react";
import { categoryGet, categoryPost } from "../../../api/course";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
class CategoryForm extends React.Component {
  formRef = React.createRef();
  state = {
    cateList: [],
  };
  componentDidMount() {
    categoryGet().then((res) => {
      this.setState({
        cateList: res.data.results,
      });
    });
  }
  onFinish = (values) => {
    console.log(values);
    categoryPost(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onFill = () => {
    this.formRef.current.setFieldsValue({
      note: "Hello world!",
      gender: "male",
    });
  };
  render() {
    return (
      <Form
        {...layout}
        ref={this.formRef}
        name="control-ref"
        onFinish={this.onFinish}
      >
        <Form.Item
          name="name"
          label="分类名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="parentId"
          label="父级类目"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select placeholder="请选择父级类目" allowClear>
            <Option value="0-0">顶级类目</Option>
            {this.state.cateList.map((item) => {
              return <Option value={item.objectId}>{item.name}</Option>;
            })}
          </Select>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={this.onReset}>
            重置
          </Button>
          <Button type="link" htmlType="button" onClick={this.onFill}>
            Fill form
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
export default CategoryForm;
